<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FileDB Configure</title>
    <style>
        *{
            padding: 0 0;
            margin: 0 0;
            box-sizing: border-box;
            user-select: none;
        }

        .nav-button{
            width: 100%;
            font-size: 14px;
            padding: 15px 15px;
        }

        .nav-button:hover{
            background-color: rgba(0,0,0,0.1);
        }

        .nav-button:active{
            background-color: rgba(0,0,0,0.05);
        }

        .nav-button-selected{
            width: 100%;
            font-size: 14px;
            padding: 15px 15px;
            background-color: rgb(0,120,215);
            color: white;
        }

        .nav-button-selected:hover{
            background-color: rgba(0, 118, 215, 0.788);
        }

        .nav-button-selected:active{
            background-color: rgba(0, 118, 215, 0.877);
        }
    </style>
    <script>
        let currentPage = 1
        function gebi(id){
            return document.getElementById(id)
        }
        function request(url){
            return new Promise((resolve, reject) => {
              fetch(url).then(res=>{
                return resolve(res.json())
              })
            })
        }
        async function loaded(){
            let re = await request("/initializationState")
            if(re.status){
                gebi("Initialized").style.display = "unset"
                changeSelectedNavButton(2,1)
            }else{
                gebi("notInitialized").style.display = "unset"
                changeSelectedNavButton(1,1)
            }
            setTimeout(() => {
                document.body.style.display = 'unset'
            }, 250);
        }
        async function exit0(){
            await fetch("/exit")
            window.close()
        }
        async function navItemClick(page,id){
            if(currentPage==id){
                return
            }
            currentPage = id
            if(page==1){
                switch (id) {
                    case 1:

                        break;
                }
            }else{

            }
            changeSelectedNavButton(page,id)
        }
        async function changeSelectedNavButton(page,id){
            let elems = document.getElementsByClassName("nav-button-selected")
            for(let i=0;i<elems.length;i++){
                elems[i].className = "nav-button"
            }
            elems = document.getElementsByClassName("nav-button")
            elems[id-1].className = "nav-button-selected"

            let pageSrc = "/page/"
            if(page==1){
                switch (id) {
                    case 1:
                        pageSrc += "configure"
                        break;
                }
            }else{
                switch (id) {
                    case 1:
                        pageSrc += "manage"
                        break;
                }
            }
            document.getElementById("right").src = pageSrc
        }
    </script>
</head>
<body onload="loaded()" style="display: none;">
    <div style="width: 100vw;height: 100vh;position: relative;overflow: hidden;">
        <div style="width: 300px;height: 100vh;background-color: rgb(242,242,242);display: inline-block;float: left;overflow-y: auto;">
            <div style="width: 100%;text-align: center;font-size: 20px;color: gray;line-height: 80px;">
                FileDB Configure
            </div>
            <div style="width: 100%;height: calc(100vh - 80px);">
                <div id="Initialized" style="display: none;">
                    <div class="nav-button" onclick="navItemClick(2,1)">
                        管理数据库
                    </div>
                </div>
                <div id="notInitialized" style="display: none;">
                    <div class="nav-button" onclick="navItemClick(1,1)">
                        配置
                    </div>
                </div>
                <!-- <div class="nav-button" onclick="exit0()">
                    退出
                </div> -->
            </div>
            
        </div>
        <div style="width: calc(100vw - 300px);height: 100vh;background-color: white;display: inline-block;float: right;position: relative;">
            <iframe id="right" style="width: 100%;height: 100%;border: 0;">

            </iframe>
        </div>
    </div>
</body>
</html>